<template>
    <div class="home">
        <!-- 轮播图部分 -->
        <el-carousel :interval="4000" type="card" height="500px" class="banner">
            <el-carousel-item v-for="item in carouselItems" :key="item.id">
                <div class="carousel-content" :style="{ backgroundImage: `url(${item.image})` }">
                    <div class="carousel-text">
                        <h2>{{ item.title }}</h2>
                        <p>{{ item.description }}</p>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>

        <!-- 产品服务概览 -->
        <div class="section">
            <h2 class="section-title">产品服务</h2>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="8" v-for="product in products" :key="product.id">
                    <el-card class="product-card" :body-style="{ padding: '0px' }">
                        <div
                            class="product-image"
                            :style="{ backgroundImage: `url(${product.image})` }"
                        ></div>
                        <div class="product-info">
                            <h3>{{ product.name }}</h3>
                            <p>{{ product.description }}</p>
                            <el-button type="primary" @click="goToProducts">了解更多</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 新闻动态 -->
        <div class="section bg-gray">
            <h2 class="section-title">新闻动态</h2>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="8" v-for="news in newsItems" :key="news.id">
                    <el-card class="news-card">
                        <div
                            class="news-image"
                            :style="{ backgroundImage: `url(${news.image})` }"
                        ></div>
                        <div class="news-info">
                            <h3>{{ news.title }}</h3>
                            <p class="news-date">{{ news.date }}</p>
                            <p class="news-summary">{{ news.summary }}</p>
                            <el-button text @click="goToNews(news)">查看详情</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 联系我们 -->
        <div class="section contact-section">
            <h2 class="section-title">联系我们</h2>
            <el-row :gutter="20" justify="center">
                <el-col :xs="24" :sm="8">
                    <div class="contact-item">
                        <el-icon><Location /></el-icon>
                        <h3>地址</h3>
                        <p>某某市某某区某某街道123号</p>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="8">
                    <div class="contact-item">
                        <el-icon><Phone /></el-icon>
                        <h3>电话</h3>
                        <p>123-456-7890</p>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="8">
                    <div class="contact-item">
                        <el-icon><Message /></el-icon>
                        <h3>邮箱</h3>
                        <p>info@company.com</p>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Location, Phone, Message } from '@element-plus/icons-vue';

const router = useRouter();

const carouselItems = ref([
    {
        id: 1,
        image: '/images/banner1.svg',
        title: '创新科技，引领未来',
        description: '致力于为客户提供最优质的产品和服务'
    },
    {
        id: 2,
        image: '/images/banner2.svg',
        title: '专业团队，优质服务',
        description: '拥有经验丰富的专业团队，为您提供全方位解决方案'
    },
    {
        id: 3,
        image: '/images/banner3.svg',
        title: '全球视野，本地服务',
        description: '立足本土，放眼全球，为客户创造更大价值'
    }
]);

const products = ref([
    {
        id: 1,
        name: '产品一',
        image: '/images/product1.svg',
        description: '创新科技产品，引领行业发展'
    },
    {
        id: 2,
        name: '产品二',
        image: '/images/product2.svg',
        description: '智能解决方案，提升效率'
    },
    {
        id: 3,
        name: '产品三',
        image: '/images/product3.svg',
        description: '专业服务，创造价值'
    }
]);

const newsItems = ref([
    {
        id: 1,
        title: '公司荣获行业创新奖',
        date: '2024-01-15',
        image: '/images/news1.svg',
        summary: '我司凭借创新技术和优质服务，荣获2024年度行业创新奖...'
    },
    {
        id: 2,
        title: '新产品发布会圆满成功',
        date: '2024-01-10',
        image: '/images/news2.svg',
        summary: '新一代产品发布会在某某大厦成功举办，获得广泛好评...'
    },
    {
        id: 3,
        title: '企业战略合作签约仪式',
        date: '2024-01-05',
        image: '/images/news3.svg',
        summary: '我司与某某集团达成战略合作，共同开拓市场...'
    }
]);

const goToProducts = () => {
    router.push('/products');
};

const goToNews = (news) => {
    router.push(`/news/${news.id}`);
};
</script>

<style scoped>
.home {
    padding-top: 60px;
}

.banner {
    margin-bottom: 40px;
}

.carousel-content {
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-text {
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
}

.section {
    padding: 60px 20px;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #2c3e50;
}

.bg-gray {
    background-color: #f8f9fa;
}

.product-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.product-info {
    padding: 20px;
}

.news-card {
    margin-bottom: 20px;
}

.news-image {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.news-info {
    padding: 20px;
}

.news-date {
    color: #666;
    font-size: 0.9rem;
    margin: 10px 0;
}

.news-summary {
    color: #666;
    margin-bottom: 15px;
}

.contact-section {
    background-color: #fff;
}

.contact-item {
    text-align: center;
    padding: 20px;
}

.contact-item .el-icon {
    font-size: 2rem;
    color: #409eff;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .carousel-text h2 {
        font-size: 1.5rem;
    }

    .carousel-text p {
        font-size: 1rem;
    }

    .section {
        padding: 40px 15px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .contact-item {
        margin-bottom: 30px;
    }
}
</style>
